<template>
  <div class="graduation-application">
    <el-main class="nopadding">
      <div class="basic-info item">
        <h3 class="title">学员基本信息</h3>
        <el-table :data="studentBasicData" style="width: 900px;" border>
          <el-table-column label="学生姓名" prop="studentName"></el-table-column>
          <el-table-column label="性别" prop="sex"></el-table-column>
          <el-table-column label="身份证号" prop="idNumber"></el-table-column>
          <el-table-column label="片区" prop="area"></el-table-column>
          <el-table-column label="校区" prop="schoolArea"></el-table-column>
          <el-table-column label="电话" prop="telPhone"></el-table-column>
        </el-table>
      </div>
      <div class="application-info item">
        <h3 class="title">毕业申请信息</h3>
        <el-table :data="applicationData" style="width: 900px;" border>
          <el-table-column label="申请毕业课程" prop="studentName"></el-table-column>
          <el-table-column label="学习时间">
            <el-table-column label="开始时间" prop="startTime"></el-table-column>
            <el-table-column label="结束时间" prop="endTime"></el-table-column>
          </el-table-column>
          <el-table-column label="毕业考试成绩" prop="graduationGrades"></el-table-column>
        </el-table>
      </div>
      <div class="graduation-work item">
        <h3 class="title">毕业作品上传</h3>
        <div class="wrap">
          <div class="graduation-work-left">
            <div class="file-item" v-for="(file, idx) in graduationWork.fileList" :key="idx">
              <div class="file-name">
                <el-icon :size="14"><Document /></el-icon>
                <span class="text">{{ file.filename }}</span>
              </div>
              <el-icon v-if="graduationWork.isEdit" :size="16" @click="graduationWorkDel(idx)"><Close /></el-icon>
            </div>
          </div>
          <div class="graduation-work-right">
            <el-button @click="graduationWorkUpload">上传</el-button>
            <el-button @click="graduationWorkEdit">编辑</el-button>
            <el-button @click="graduationWorkView">浏览</el-button>
          </div>
        </div>
        <div class="opt">
          <el-button>提交申请</el-button>
          <el-button>老师审核</el-button>
        </div>
      </div>
      <div class="associated-course item">
        <h3 class="title">关联课程情况</h3>
        <el-table :data="unGraduationCourseData" border >
          <el-table-column label="未毕业课程数" prop="unGraduationCourse"></el-table-column>
          <el-table-column label="未毕业课程详情">
            <el-table-column label="课程名称" prop="courseName1"></el-table-column>
            <el-table-column label="学习时间">
              <el-table-column label="开始" prop="startTime1"></el-table-column>
              <el-table-column label="结束" prop="endTime1"></el-table-column>
            </el-table-column>
            <el-table-column label="课程名称" prop="courseName2"></el-table-column>
            <el-table-column label="学习时间">
              <el-table-column label="开始" prop="startTime2"></el-table-column>
              <el-table-column label="结束" prop="endTime2"></el-table-column>
            </el-table-column>
            <el-table-column label="课程名称" prop="courseName3"></el-table-column>
            <el-table-column label="学习时间">
              <el-table-column label="开始" prop="startTime3"></el-table-column>
              <el-table-column label="结束" prop="endTime3"></el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
        <br />
        <el-table :data="graduationCourseData" border >
          <el-table-column label="已毕业课程数" prop="graduationCourse"></el-table-column>
          <el-table-column label="已毕业课程详情">
            <el-table-column label="课程名称" prop="courseName1"></el-table-column>
            <el-table-column label="学习时间">
              <el-table-column label="开始" prop="startTime1"></el-table-column>
              <el-table-column label="结束" prop="endTime1"></el-table-column>
            </el-table-column>
            <el-table-column label="课程名称" prop="courseName2"></el-table-column>
            <el-table-column label="学习时间">
              <el-table-column label="开始" prop="startTime2"></el-table-column>
              <el-table-column label="结束" prop="endTime2"></el-table-column>
            </el-table-column>
            <el-table-column label="课程名称" prop="courseName3"></el-table-column>
            <el-table-column label="学习时间">
              <el-table-column label="开始" prop="startTime3"></el-table-column>
              <el-table-column label="结束" prop="endTime3"></el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
    <el-upload
      ref="upload"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      accept=".jpg, .jpeg, .gif, png, .mp4"
      style="display: none;"
      :before-upload="beforeUpload"
      :on-success="uploadSuccess"
    ></el-upload>
    <graduation-work-preview
      v-model="graduationWork.isView"
      :fileList="graduationWork.fileList"
    >
    </graduation-work-preview>

  </div>
</template>

<script>
import { Close, Document } from '@element-plus/icons-vue';
import GraduationWorkPreview from './components/graduation-work-preview.vue';

export default {
  components: {
    Close,
    Document,
    GraduationWorkPreview,
  },
  data() {
    return {
      studentBasicData: [{
        studentName: '张三',
        sex: '',
        idNumber: 3242345235235,
        area: '中山',
        schoolArea: 'xxxx',
        telPhone: '13123124',
      }],
      applicationData: [{
        studentName: '张三',
        startTime: '2023-01-12',
        endTime: '2023-02-09',
        graduationGrades: 95
      }],
      // 毕业作品
      graduationWork: {
        fileList: [
          {filename: 12312312, type: 'jpg', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
          {filename: 12312312, type: 'png', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
          {filename: 12312312, type: 'mp4', url: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm'},
          {filename: 12312312, type: 'mp4', url: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm'},
          {filename: 12312312, type: 'mp4', url: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm'},
          {filename: 12312312, type: 'gif', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
          {filename: 12312312, type: 'gif', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
          {filename: 12312312, type: 'mp4', url: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm'},
          {filename: 12312312, type: 'png', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
        ],
        isEdit: false,
        isView: false,
      },
      unGraduationCourseData: [
        {
          unGraduationCourse: '3',
          courseName1: '语文',
          startTime1: '2021-05-02',
          endTime1: '2022-05-02',
          courseName2: '数学',
          startTime2: '2021-05-02',
          endTime2: '2021-12-02',
          courseName3: '英语',
          startTime3: '2021-05-02',
          endTime3: '2021-09-02',
        },
      ],
      graduationCourseData: [
        {
          graduationCourse: '3',
          courseName1: '历史',
          startTime1: '2021-05-02',
          endTime1: '2022-05-02',
          courseName2: '地理',
          startTime2: '2021-05-02',
          endTime2: '2021-12-02',
          courseName3: '化学',
          startTime3: '2021-05-02',
          endTime3: '2021-09-02',
        },
      ]
    }
  },
  methods: {
    // 毕业作品上传
    graduationWorkUpload() {
      const uploadRef = this.$refs.upload.$refs.uploadRef
      uploadRef.$refs.inputRef.click();
    },
    // 毕业作品编辑
    graduationWorkEdit() { 
      this.graduationWork.isEdit = true;
    },
    // 毕业作品浏览
    graduationWorkView() { 
      this.graduationWork.isView = true;
    },
    graduationWorkDel(idx) {
      this.graduationWork.fileList.splice(idx, 1)
    },
    beforeUpload(file) {
      console.log('file', file);
    },
    uploadSuccess(res, file) {
      console.log('uploadSuccess', file);
    }
  }
}


</script>


<style lang="scss" scoped>
.graduation-application {
  height: 100%;
  padding: 15px;
  background-color: #fff;
  .item {
    padding-bottom: 30px;
    .title {
      font-size: 20px;
      padding-bottom: 10px;
      color: #333;
    }
  }
  .graduation-work {
    .wrap {
      display: flex;
      .graduation-work-left {
        border: 1px solid #333;
        width: 800px;
        height: 200px;
        overflow-y: auto;
        .file-item {
          display: flex;
          flex: 1;
          padding: 5px 20px;
          height: 30px;
          justify-content: space-between;
          .file-name {
            display: flex;
            align-items: center;
            .text {
              padding-left: 5px;
            }
          }
          &:hover {
            background-color: #f5f7fa;
            cursor: pointer;
            color: #409eff;
          }
        }
      }
      .graduation-work-right {
        display: flex;
        flex-direction: column;
        margin-left: 40px;
        .el-button {
          margin-left: 0px;
          margin-bottom: 10px;
        }
      }
    }
    .opt {
      padding-top: 20px;
      padding-left: 200px;
      display: flex;
    }
  }
}
</style>